<template>
  <template v-if="getShow">
    <LoginFormTitle class="enter-x" />
    <div class="enter-x min-w-64 min-h-64">
      <div class="qr-box">
        <QrCode
          :value="qrCodeUrl"
          class="enter-x flex justify-center xl:justify-center"
          :width="280"
        />
      </div>
      <Divider class="enter-x">{{ t('sys.login.scanSign') }}</Divider>
      <Button size="large" block class="mt-4 enter-x" @click="handleBackLogin">
        {{ t('sys.login.backSignIn') }}
      </Button>
    </div>
  </template>
</template>
<script lang="ts" setup>
  import { computed, unref } from 'vue';
  import LoginFormTitle from './LoginFormTitle.vue';
  import { Button, Divider } from 'ant-design-vue';
  import { QrCode } from '/@/components/Qrcode/index';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useLoginState, LoginStateEnum } from './useLogin';

  const qrCodeUrl = 'https://vvbin.cn/next/login';

  const { t } = useI18n();
  const { handleBackLogin, getLoginState } = useLoginState();

  const getShow = computed(() => unref(getLoginState) === LoginStateEnum.QR_CODE);
</script>

<style lang="less" scoped>
  .qr-box {
    position: relative;
    left: 50%;
    transform: translate(-50%);
    width: 300px;
    height: 300px;
    margin-top: 63px;
    background: #ffffff;
    border-radius: 20px 20px 20px 20px;
    border: 1px solid rgba(0, 0, 0, 0.06);
  }
</style>
